<!--
 * @Description: 点云数据模拟
 * @Author: wang_k
 * @Date: 2023-07-27 14:35:43
 * @LastEditTime: 2023-07-27 21:12:21
 * @FilePath: /demo_important/src/views/ThreeScene/components/cloudScene.vue
-->
<template>
  <div
    class="cloudScene"
    id="canvasBig"
  >

  </div>
</template>

<script>
import * as THREE from 'three';
export default {
  name: 'cloudScene',
  components: {

  },
  props: {

  },
  data() {
    return {
      scene: "",
      pointclouds: [
        {
          x: 12,
          y: 13,
          z: 4
        }
      ],
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.handleInit()
  },
  methods: {
    /* 初始化 */
    handleInits() {
      scene = new THREE.Scene();//创建场景
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);//向场景中添加环境光
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 80; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
      camera.position.set(0, -15, 7); //设置相机位置
      // var position1 = new THREE.Vector3(0, 25, 0)
      // camera.lookAt(lookatbox.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);//设置渲染区域尺寸
      renderer.setClearColor(0xff0000, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      //执行渲染操作   指定场景、相机作为参数
      function render() {
        renderer.render(scene, camera);//执行渲染操作
      }
      render();

      /* 初始化点云 */
      const material = new THREE.PointsMaterial({
        color: new THREE.Color(1, 0, 0),//模型颜色
        size: 0.05//模型大小
      });//配置模型的材质对象        
      function initpoint() {
        const geometry = new THREE.BufferGeometry();//创建图形对象
        const vertices = new Float32Array();//创建图形的顶点对象
        const attribue = new THREE.BufferAttribute(vertices, 3);//创建属性对象
        const points = new THREE.Points(geometry, material);//将上述对象配置到点模型对象上
        scene.add(points);
      };
      initpoint();

      /* 点云的更新 */
      // const axisHelper = new THREE.AxisHelper(10);
      // scene.add(axisHelper);//添加坐标指示器
      // const controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
      // controls.addEventListener('change', render);//监听鼠标、键盘事件
      // const DrawPoint = function (arr1) {
      //   const attribues = new THREE.BufferAttribute(new Float32Array(arr1), 3);
      //   geometry.attributes.position = attribues;
      // };
      // setInterval(() => {
      //   DrawPoint(this.pointcloud);//这里的pointcloud是onmessage接口处传出来的数据
      //   render();
      // }, 30)
    },
    handleInit() {
      // 获取容器元素
      const canvasContainer = document.getElementById('canvasBig');

      // 创建场景、相机和渲染器
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0xe0ffff, 1); //设置背景颜色
      renderer.setSize(window.innerWidth, window.innerHeight);
      canvasContainer.appendChild(renderer.domElement);

      // 创建点云的几何体和材质
      const geometry = new THREE.BufferGeometry();
      const material = new THREE.PointsMaterial({ color: new THREE.Color(1, 0, 0), size: 0.1 });

      // 添加点坐标到几何体中
      // 假设有一个名为 points 的数组，包含点的坐标数据
      // 创建一个包含点坐标的数组
      const pointPositions = [
        { x: -1, y: 1, z: 0 },
        { x: 0, y: 0, z: 0 },
        { x: 1, y: -1, z: 1 }
      ];
      // 将点的位置添加到几何体中
      const positions = [];
      // pointPositions.forEach(position => {
      //   positions.push(position.x, position.y, position.z);
      // });
      // geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

      // // this.points.forEach((point) => {
      // //   geometry.vertices.push(new THREE.Vector3(point.x, point.y, point.z));
      // // });

      // // 创建点云对象并添加到场景中
      // const pointCloud = new THREE.Points(geometry, material);
      // scene.add(pointCloud);

      // // // 设置相机位置
      // camera.position.z = 5;

      // // 渲染场景
      // function animate() {
      //   requestAnimationFrame(animate); //执行动画函数，优化动画性能以及流畅度
      //   renderer.render(scene, camera);
      // }
      // animate();
      // this.load(scene, renderer, camera)


    },
    load(scene, renderer, camera) {
      // 初始点云数据
      let pointCloudData = [
        { x: 0, y: 0, z: 0 },
        { x: 1, y: 1, z: 1 }
      ];

      // 创建点云几何体和材质
      const geometry = new THREE.BufferGeometry();
      const material = new THREE.PointsMaterial({ color: new THREE.Color(1, 0, 0), size: 0.5 });
      let positions = [];

      geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

      // 创建点云对象并添加到场景中
      const pointCloud = new THREE.Points(geometry, material);
      scene.add(pointCloud);

      // 定时器，每隔2秒更新点云数据并渲染场景
      setInterval(() => {
        console.log("----->加载",);
        // 生成随机点云数据
        const newPointCloudData = generateRandomPointCloudData();

        // 更新点云几何体的位置属性
        positions = []; // 清空原有的点数据
        newPointCloudData.forEach(position => {
          positions.push(position.x, position.y, position.z);
        });
        geometry.attributes.position.needsUpdate = true;

        // 渲染场景
        renderer.render(scene, camera);
      }, 2000);

      // 生成随机点云数据的示例函数
      function generateRandomPointCloudData() {
        const numPoints = 1000; // 生成1000个随机点

        const pointCloudData = [];
        for (let i = 0; i < numPoints; i++) {
          const x = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机x坐标
          const y = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机y坐标
          const z = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机z坐标

          pointCloudData.push({ x, y, z });
        }

        return pointCloudData;
      }

    },
    // 生成随机点云数据的示例函数
    generateRandomPointCloudData() {
      const numPoints = 1000; // 生成1000个随机点
      const pointCloudData = [];
      for (let i = 0; i < numPoints; i++) {
        const x = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机x坐标
        const y = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机y坐标
        const z = Math.random() * 2 - 1; // 在[-1, 1]范围内生成随机z坐标

        pointCloudData.push({ x, y, z });
      }

      return pointCloudData;
    }
  },
};
</script>

<style scoped >
.cloudScene {
  width: 100%;
  height: 100%;
}
#canvasBig {
  background: #fff;
}
</style>
